<template>
  <!-- Excel上传组件 -->
  <div class="upload-excel">
    <!-- 上传按钮 -->
    <div class="btn-upload">
      <el-button :loading="loading" type="primary" @click="handleUpload">
        excel上传
      </el-button>
    </div>

    <!-- 文件选择输入框 -->
    <input
        ref="excelUploadInput"
        accept=".xlsx, .xls"
        class="excel-upload-input"
        type="file"
        @change="handleChange"
    />
  </div>

  <div style="overflow: hidden;overflow-y: scroll;height: 600px">
    <el-scrollbar>
      <el-table :data="tableData.results" style="width: 100%">
        <el-table-column v-for="(item, index) in tableData.header" :key="index" :label="item"
                         :prop="item"></el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>

<script setup>
import XLSX from 'xlsx'
import {ref} from 'vue'

const tableData = ref([])

// 组件内部状态
const loading = ref(false)
const excelUploadInput = ref(null)

// 点击上传按钮触发
const handleUpload = () => {
  excelUploadInput.value.click()
}

// 处理文件选择后的变化
const handleChange = e => {
  const files = e.target.files
  const rawFile = files[0]
  if (!rawFile) return
  upload(rawFile)
}

// 执行文件上传
const upload = rawFile => {
  excelUploadInput.value.value = null
  readerData(rawFile)
}

// 读取文件数据
const readerData = rawFile => {
  loading.value = true
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const data = e.target.result
      const workbook = XLSX.read(data, {type: 'array'})
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]
      const header = getHeaderRow(worksheet)
      const results = XLSX.utils.sheet_to_json(worksheet)
      generateData({header, results})
      loading.value = false
      resolve()
    }
    reader.readAsArrayBuffer(rawFile)
  })
}

// 处理读取数据后的操作
const generateData = excelData => {
  // 处理成功回调
  tableData.value = excelData
  console.log('Excel数据解析完成:', excelData)
}

// 获取表头
const getHeaderRow = sheet => {
  const headers = []
  const range = XLSX.utils.decode_range(sheet['!ref'])
  let C
  const R = range.s.r
  for (C = range.s.c; C <= range.e.c; ++C) {
    const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})]
    let hdr = 'UNKNOWN ' + C
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
    headers.push(hdr)
  }
  return headers
}
/**
 * 解析 excel 导入的时间格式
 */
const formatDate = (numb) => {
  const time = new Date((numb - 1) * 24 * 3600000 + 1)
  time.setYear(time.getFullYear() - 70)
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() - 1 + ''
  return (
      year +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (date < 10 ? '0' + date : date)
  )
}


</script>

<style lang="scss" scoped>
.upload-excel {
  display: flex;
  justify-content: center;
  //margin-top: 100px;/

  .excel-upload-input {
    display: none;
    z-index: -9999;
  }

  .btn-upload,
  .drop {
    border: 1px dashed #bbb;
    width: 350px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  }

  .drop {
    line-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #bbb;

    i {
      font-size: 60px;
      display: block;
    }
  }
}
</style>
